@import "./scss/icon";

// 修改默认样式 如果支持通配符请使用 * 代替
view,text,image,button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: 2rpx;
  text-indent: 2rpx;
  word-spacing: 2rpx;
}

.noWS {
  white-space: nowrap;
}
.noLS {
  letter-spacing: normal;
}

.ui-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  overflow-x: hidden;
  min-height: 60vh;
}

.ui-form {
  display: flex;
  flex-direction: column;
  --item-height: 80rpx;
  --font-size: 35rpx;
  --label-width: 150rpx;
  &-item {
    display: flex;
    flex-direction: row;
    height: var(--item-height);
    font-size: var(--font-size);
    padding: calc(var(--item-height) * 0.3) 0 0 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    margin: 5rpx 2rpx 5rpx 2rpx;
    &-required {
      color: red;
      font-weight: bolder;
      height: var(--item-height);
      line-height: var(--item-height);
    }
    &-label {
      height: var(--item-height);
      line-height: var(--item-height);
      width: var(--label-width);
      text-align: justify;
      text-align-last: justify;
      padding: 0 5rpx;
    }
    &-content {
      flex: 1;
      height: var(--item-height);
      line-height: var(--item-height);
      &-input {
        height: var(--item-height);
        line-height: var(--item-height);
      }
    }
  }
  &-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}

.ui-steps {
  --item-height: 50rpx;
  --line-gap: 20rpx;
  display: flex;
  flex-direction: column;
  text-align: start;
  margin: 20rpx 0;
  &-item {
    height: calc(var(--item-height) + var(--line-gap) + var(--line-gap));
    padding-top: var(--line-gap);
    padding-bottom: var(--line-gap);
    position: relative;
    top: 0;
    left: 0;
    &-icon {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 15rpx;
    }
    &-title {
      height: var(--item-height);
      line-height: var(--item-height);
      font-size: 80%;
    }
  }
  &-item-first {

  }
  &-item-last {

  }
}

// 正方形
.ui-square {
  aspect-ratio: 1 / 1;
}
.ui-circle {
  border-radius: 50%;
}
.ui-box-shadow {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.4);
}

.ui-button {
  padding: 10rpx 0;
}

.ui-bo-r {
  border-right: 1rpx solid rgba(0, 0, 0, 0.1);
}
.ui-bo-l {
  border-left: 1rpx solid rgba(0, 0, 0, 0.1);
}
.ui-bo-t {
  border-top: 1rpx solid rgba(0, 0, 0, 0.1);
}
.ui-bo-b {
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}

@for $i from 0 through 100 {
  .wp-#{$i} {
    width: percentage($i / 100);
  }
  .hp-#{$i} {
    height: percentage($i / 100);
  }
  .wv-#{$i} {
    width: #{$i}+"vw";
  }
  .hv-#{$i} {
    height: #{$i}+"vh";
  }
  .mtp-#{$i} {
    margin-top: percentage($i / 100);
  }
  .mbp-#{$i} {
    margin-bottom: percentage($i / 100);
  }
  .fw-#{$i} {
    font-weight: $i * 10;
  }
  .fs-#{$i} {
    font-size: percentage($i / 10);
  }
  .op-#{$i} {
    opacity: $i / 100;
  }
  .ls-#{$i} {
    letter-spacing: #{$i}+"rpx";
    text-indent: #{$i}+"rpx";
  }
}
@for $i from 0 through 500 {
  .w-#{$i} {
    width: #{$i}+"rpx";
  }
  .h-#{$i} {
    height: #{$i}+"rpx";
  }
  .lh-#{$i} {
    line-height: #{$i}+"rpx";
  }
  .mt-#{$i} {
    margin-top: #{$i}+"rpx";
  }
  .mb-#{$i} {
    margin-bottom: #{$i}+"rpx";
  }
  .ml-#{$i} {
    margin-left: #{$i}+"rpx";
  }
  .mr-#{$i} {
    margin-right: #{$i}+"rpx";
  }
  .pt-#{$i} {
    padding-top: #{$i}+"rpx";
  }
  .pb-#{$i} {
    padding-bottom: #{$i}+"rpx";
  }
  .pl-#{$i} {
    padding-left: #{$i}+"rpx";
  }
  .pr-#{$i} {
    padding-right: #{$i}+"rpx";
  }
  .z-#{$i} {
    z-index: $i;
  }
  .t-#{$i} {
    top: #{$i}+"rpx";
  }
  .l-#{$i} {
    left: #{$i}+"rpx";
  }
  .r-#{$i} {
    right: #{$i}+"rpx";
  }
  .b-#{$i} {
    bottom: #{$i}+"rpx";
  }
}

.ma {
  margin: auto;
}
.fr {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.fr-first {
  margin-left: 0;
}
.fr-last {
  margin-left: auto;
}
.fc {
  display: flex;
  flex-direction: column;
}
.fr-jc-sb {
  justify-content: space-between;
}
.fr-jc-sa {
  justify-content: space-around;
}

.tc {
  text-align: center;
}
.pf {
  position: fixed;
}
.pa {
  position: absolute;
}
.pr {
  position: relative;
}
.ov {
  overflow: hidden;
}